<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="list">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
    </div>
</body>
<script>
    // 伪数组(类数组) / 集合
    // 有数组的结构(1. 有length属性 2. 可以通过下标取值,伪数组不一定能通过下标赋值(看官方给定的特性) 3.可以被循环遍历 for, 不建议使用for...in),但是不能使用数组的方法

    // 常见伪数组
    // arguments
    // 获取元素的方法
    //    document.getElementsByClassName()
    //    document.getElementsByTagName()
    //    document.getElementsByName()
    //    document.querySelectorAll()    => 有自己的forEach方法 (但是没有数组的其他方法)

    // classList 

    // 伪数组转真数组的方法(间接转)?   => 伪数组不能使用数组的方法,如果想用,需要先转化为真数组
    // 1. 新建数组,遍历伪数组,将伪数组中的每一个元素放到新数组中  (手搓版)

    var liList = document.querySelectorAll(".list li");
    console.log(liList.length);

    var list = [];
    for(var i = 0;i<liList.length;i++){
        var item = liList[i]; // liList[i] => 每个元素 => 对象 => 引用类型
        list.push(item);
    }

    console.log(list);
    // console.log(Array.isArray(list));  
    // list[0].innerHTML = 111111;

    // list.map(function(item,index){
    //     console.log(item,index);
    // })



    // 2. 构造函数Array提供的方法  Array.from();
    // Array.from()    接收一个伪数组/类数组,返回对应的真数组
    // Array.isArray() 接收一个任意类型的数据,判断是否是真数组 (真数组=>true 否则=>false)

    var list = Array.from(liList);
    console.log(list);
    console.log(Array.isArray(list));







</script>
</html>